<template>
  <div class="com-container">
    <div class="com-chart" ref="age_dis_ref"></div>
  </div>
</template>

<script>
import indexdata from '@/api/data/indexdata'

export default {
  props: ['timecity'],
  watch: {
    timecity: {
      async handler (newVal) {
        await this.timeCityChart()
      },
      deep: true
    }
  },
  data () {
    return {
      chartInstance: null,//图标实例
      allData: null,//图表数据
      size: null,//大小
      currentIndex: 0,//当前所展示的一级分类的数据
      key: 0,
    }
  },
  mounted () {
    this.initChart()
    this.getData()
    //增加屏幕大小变化监听的事件
    window.addEventListener('resize', this.screenAdapter)
    this.screenAdapter()
  },
  destroyed () {
    window.removeEventListener('resize', this.screenAdapter)
  },
  methods: {
    async timeCityChart () {
      const timeCity = {}
      timeCity.startYear = this.timecity.startYear + '-01-01'
      timeCity.endYear = this.timecity.endYear + '-01-01'
      timeCity.city = this.timecity.city
      const res = await indexdata.getAgeDistributionByTimeCity(timeCity)
      const data = res.data.ageDistribution
      console.log(data)
      if(data.length === 0){
        const option = {
          legend: {
            data: [],
          },
          series:[{
            type:'pie',
            data:[]
          }]
        }
        this.chartInstance.setOption(option)
        return
      }
      this.allData = data
      this.updateChart()
    },
    async initChart () {
      this.chartInstance = this.$echarts.init(this.$refs.age_dis_ref, 'dark')
      const initOption = {
        title: {
          text: '年龄分段',
          left: 20,
          top: 20
        },
        legend: {
          left: '10',
          orient: 'vertical',
          top: '15%',
          icon: 'circle'
        },
        series: [
          {
            type: 'pie',
            label: {
              show: false,
              position: 'outside',
              formatter: function (res) {
                return res.name + ' ' + res.value + '人'
              },
              color: '#fff',
              fontSize: 18
            },
            //  高亮
            emphasis: {
              label: {
                show: true,
              },
              labelLine: {
                show: false
              },

            }
          }
        ]
      }
      this.chartInstance.setOption(initOption, 'dark')
    },
    async getData () {
      const res = await indexdata.getAgeDistribution()
      this.allData = res.data.ageDistribution
      this.updateChart()
    },
    updateChart () {
      //图例数据
      const legendData = this.allData.map(item => {
        return item.generation
      })
      const seriesData = this.allData.map(item => {
        return {
          name: item.generation,
          value: item.numbers
        }
      })
      let textTitle = '历史人物年龄分段'
      if(typeof this.timecity !== 'undefined'){
        textTitle = this.timecity.city + ' 历史人物年龄分段'
      }
      const dataOption = {
        title:{
          text: textTitle
        },
        legend: {
          data: legendData,
        },
        series: [{
          data: seriesData
        }]
      }
      this.chartInstance.setOption(dataOption)
    },
    screenAdapter () {
      this.size = (this.$refs.age_dis_ref.offsetWidth / 100) * 3.6
      const adaptOption = {
        title: {
          textStyle: {
            fontSize: this.size/1.2
          }
        },
        legend: {
          itemWidth: this.size * 1.5,
          itemHeight: this.size * 1.5,
          itemGap: this.size,
          textStyle: {
            fontSize: this.size
          }
        },
        series: [
          {
            radius: this.size * 6,
            center: ['50%', '50%'],
            label: {
              fontSize: this.size
            },
          }
        ]
      }
      this.chartInstance.setOption(adaptOption)
      this.chartInstance.resize()
    },
  }
}
</script>

<style scoped>
</style>

